<template>
  <h1>开关组件</h1>
  <el-switch v-model="isShow" />
  <br>
  是否显示图片:
  <el-switch
      v-model="isShow"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      active-text="显示"
      inactive-text="隐藏"
  />
  <hr>
  <img src="pp.png" alt="" width="350px" v-show="isShow">
  <hr>
<!-- :active-value="开关打开的值" :inactive-value="开关关闭的值"  支持 number 和 string 和 boolean -->
  <el-switch v-model="num" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
  <el-switch v-model="str" :active-value="'1'" :inactive-value="'0'" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
</template>
<script setup>
import { ref } from 'vue'

const isShow = ref(true);
const num = ref(1);
const str = ref('1');
</script>
<style scoped>

</style>